<template>
	<div class="search">
		<div class="header">
			<div class="search-container">
				<img class="icon" src="./images/search.png" alt="">
				<input type="text" placeholder="书籍名" class="bar" auto-focus="true" placeholder-class="in-bar" v-focus @keyup.enter="onConfirm" ref="searchInput" :value="q">
				<img src="./images/cancel.png" alt="" class="cancel-img" @click="onDelete">
			</div>
			<div class="cancel" @click="onCancel">取消</div>
		</div>
		<div class="search-list" v-if="!searching">
			<div class="history">
				<div class="title">
					<div class="chunk"></div>
					<div class="text">历史搜索</div>
				</div>
				<div class="tags">
					<vTag v-for="(item,index) of limit(historyWords,10)" :text="item" :key="index" @tapping="onConfirm"></vTag>
				</div>
			</div>
			<div class="history hot-search">
				<div class="title">
					<div class="chunk"></div>
					<div class="text">热门搜索</div>
				</div>
				<div class="tags">
					<vTag v-for="(item,index) of limit(hotWords,10)" :text="item" :key="index" @tapping="onConfirm"></vTag>
				</div>
			</div>
		</div>
		<div class="books-container" v-if="searching">
			<vBook :book="book" v-for="(book,index) of dataArray" :key="index"></vBook>
		</div>
		<vLoading v-if="loadingCenter"></vLoading>
	</div>
</template>
<script>
import {KeywordModel} from '../../models/keyword.js'
import {BookModel} from '../../models/book.js'
import {searchMix} from '../mixins/searchMix.js'
let keywordModel=new KeywordModel()
let bookModel=new BookModel()
import vTag from '../tag/tag.vue'
import vBook from '../book/book.vue'
import vLoading from '../loading/loading.vue'
export default{
	name:'v-search',
	mixins:[searchMix],
	data(){
		return{
			historyWords:[],
			hotWords:[],
			searching:false,
			q:'',
			loadingCenter:false
		}
	},
	props:{
		more:{
			type:String
		}
	},
	created(){
		this.historyWords=keywordModel.getHistory()
		keywordModel.getHot().then(res=>{
			this.hotWords=res.data.hot
		})
	},
	components:{
		vTag,vBook,vLoading
	},
	methods:{
		onCancel(){
			this.initialize()
			this.$emit('cancel')
		},
		onConfirm(e){
			this.searching=true
			this._showLoadingCenter()
			let q=this.$refs.searchInput.value || e.text
			if(q){
				this.q=q
				bookModel.search(0,q).then(res=>{	
					this.setMoreData(res.data.books)
					this.setTotal(res.data.total)
					keywordModel.addToHistory(q)
					this._hideLoadingCenter()
					if(res.data.books.length==0){
						this.$message({
		          message: '未找到相关书籍,请重新输入',
		          type: 'warning'
		        });
		        this.searching=false
		        this.q=''
					}
				})
			}else{
				this.$message({
          message: '请输入搜索关键词',
          type: 'warning'
        });
			}
			
		},
		limit(array,length){
  		return array.slice(0,length)
  	},
  	onDelete(){
  		this.initialize()
  		this.searching=false
  		this.q=''
  	},
  	_showLoadingCenter(){
  		this.loadingCenter=true
  	},
  	_hideLoadingCenter(){
  		this.loadingCenter=false
  	}
	},
	directives: {//自定义指令focus 解决Input focus问题
		focus:{
			inserted: function (el) {
				el.focus()
			}
		}
	},
	watch:{
		more(newV,oldV){	
			if(!this.q){
				return 
			}
			if(this.isLocked()){
				return
			}
			if(this.hasMore()){
				this.locked()
				bookModel.search(this.getCurrentStart(),this.q).then(res=>{
					console.log(res.data.books)
					//this.dataArray=this.dataArray.concat(res.data.books)//合并数组
					this.setMoreData(res.data.books)
					this.unLocked()
				},err=>{
					this.unLocked()
				})
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
.search{display: flex;flex-direction: column;align-items: center;width: 100%;}
.header {background-color: #ffffff;position: fixed;height:50px;border-top: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;display: flex;flex-direction: row;width:100%;align-items: center;z-index: 99;}
.search-container {display: inline-flex;flex-direction: row;align-items: center;background-color: #f5f5f5;border-radius: 50px;margin-left: 10px;flex:1;}
.in-bar {color: #999;}
.bar {border-top-right-radius: 15px;border-bottom-right-radius: 15px;display: inline-block;height:34px;font-size:14px;background: #f5f5f5;width:100%;}
.icon{width:14px;height:14px;margin-left:12px;margin-right:8px;}
.cancel {line-height:34px;width:60px;text-align: center;display: inline-block;border: none;}
.cancel-img {width:14px;height:14px;margin-right:10px;}
.search-list{width:100%;padding:0 20px;box-sizing:border-box;}
.history {/*width:345px;*/width:100%;margin:20px 0 10px 0;display: flex;font-size:14px;margin-top:80px;flex-direction: column;}
.hot-search {margin-top:35px;}
.title {line-height:15px;display: flex;flex-direction: row;align-items: center;}
.books-container v-book {margin-bottom:12px;}
.books-container {width:285px;margin-top:50px;display: flex;flex-direction: row;flex-wrap: wrap;padding: 0 45px 0 45px;justify-content: space-between;}
.loading {margin:25px 0 25px 0;}
.loading-center {position: absolute;top: 50%;left: 50%;}
.empty-tip {display: inline-block;width: 100%;text-align: center;position: absolute;top: 50%;}
.chunk {height:15px;width:5px;background-color: #000;display: inline-block;margin-right:10px;}
.tags {/* padding-left:15px; */display: flex;flex-direction: row;flex-wrap: wrap;margin-top:12px;padding-left:15px;/*width:215px;*/}
.tags v-tag{margin-right:10px;margin-bottom:10px;}


.test{width:100%;display:inline-block;height:50px;}
</style>